<template>
  <t-dialog
    v-model:visible="formVisible"
    header="新增或编辑系统用户"
    width="680"
    :footer="false"
    @close="onClickCloseBtn"
  >
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit">
        <t-input v-model="formData.userId" hidden></t-input>
        <t-form-item label="昵称" name="nickName">
          <t-input v-model="formData.nickName" />
        </t-form-item>
        <t-form-item label="姓名" name="userName">
          <t-input v-model="formData.userName" />
        </t-form-item>
        <t-form-item label="登录名" name="loginName">
          <t-input v-model="formData.loginName" :disabled="!!formData.userId" />
        </t-form-item>
        <t-form-item v-if="!formData.userId" label="登录密码" name="pwdTxt">
          <t-input v-model="formData.pwdTxt" type="password" />
        </t-form-item>
        <t-form-item label="电话" name="userMobile">
          <t-input v-model="formData.userMobile" />
        </t-form-item>
        <t-form-item label="邮箱" name="userEmail">
          <t-input v-model="formData.userEmail" />
        </t-form-item>
        <t-form-item label="角色" name="userRoles">
          <t-select v-model="formData.userRoles" :options="userRoleSelect" multiple />
        </t-form-item>
        <t-form-item style="float: right">
          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
          <t-button theme="primary" type="submit">确定</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="tsx">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { onMounted, PropType, ref, watch } from 'vue';

import { post, saveOrUpdate } from '@/api/common';

export interface FormData {
  userId: number;
  userUuid: string;
  userMobile: string;
  userEmail: string;
  nickName: string;
  userName: string;
  loginName: string;
  pwdTxt: string;
}

const INITIAL_DATA: FormData = {
  userId: null,
  userUuid: '',
  userMobile: '',
  userEmail: '',
  nickName: '',
  userName: '',
  loginName: '',
  pwdTxt: '123456',
  userRoles: [],
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
});

const userRoleSelect = ref([
  { label: '架构云', value: '1' },
  { label: '大数据', value: '2' },
  { label: '区块链', value: '3' },
  { label: '人工智能', value: '5' },
]);

onMounted(async () => {
  const select = await post('/sysRole/select', {});
  console.log('r', select);
  userRoleSelect.value = select;
});

const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });

const onSubmit = async ({ validateResult, firstError }: SubmitContext) => {
  if (!firstError) {
    await saveOrUpdate('/sysUser/saveOrUpdate', formData.value);
    MessagePlugin.success('提交成功');
    formVisible.value = false;
    // await emit.refreshTable();
    await emit('refreshTable');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

const onClickCloseBtn = () => {
  formVisible.value = false;
  formData.value = { ...INITIAL_DATA };
  console.log(`onClickCloseBtn`);
};

const emit = defineEmits(['update:visible', 'refreshTable']);
// const emit = defineEmits<{
//   'update:visible': void;
//   refreshTable: void;
// }>();

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);

watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);

const rules: FormRules = {
  nickName: [{ required: true, message: '请输入昵称', type: 'error' }],
  userName: [{ required: true, message: '请输入姓名', type: 'error' }],
  loginName: [{ required: true, message: '请输入登录账户', type: 'error' }],
  userMobile: [{ required: true, message: '请输入电话', type: 'error' }],
  userEmail: [{ required: true, message: '请输入邮箱', type: 'error' }],
  pwdTxt: [{ required: true, message: '请输入密码', type: 'error' }],
  userRoles: [{ required: true, message: '请选择用户角色', type: 'error' }],
};
</script>
